
ES6基础语法
function Component() {
	return <h1>I am Jackie</h1>
}

class ES6Component extends React.Component{
	render() {
		return <h1>I am Jackie in ES6</h1>
	}
}

ReactDOM.render(
	<div>
		<Component/>
		<ES6Component/>
	</div>,
	document.getElementById('app'));

state&&props用法
class Component extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			name:'Jackie'
		}
	}
	render() {
		setTimeout(()=>{
			this.setState({
				name:'Jackie Test'
			})
		},2000)
		return <h1>I am {this.state.name} in ES6</h1>
	}
}

ReactDOM.render(
	<div>
		<Component name="Jackie 123"/>
	</div>,
	document.getElementById('app'));



//事件处理方式一
class Component extends React.Component{
	constructor(props){
		super(props);
		this.state={
			name:'jackie',
			age:18
		}
		this.handleClick = this.handleClick.bind(this);
	}
	handleClick(){
		this.setState({
			age:this.state.age+1
		});
		console.log('家一岁');
	}
	render(){
		return(
			<div>
				<h1>I am {this.state.name}</h1>
				<p>I am {this.state.age} years old!!!</p>
				<button onClick={this.handleClick}>加一岁</button>
			</div>
			);
	}
}

ReactDOM.render(
		<Component/>,
	document.getElementById('app'));	

//事件处理方式二
class Component extends React.Component{
	constructor(props){
		super(props);
		this.state={
			name:'jackie',
			age:18
		}
	}
	handleClick(){
		this.setState({
			age:this.state.age+1
		});
		console.log('家一岁');
	}
	onValueChange(e){
		this.setState({
			age:e.target.value
		});
		console.log('家一岁');
	}
	render(){
		return(
			<div>
				<h1>I am {this.state.name}</h1>
				<p>I am {this.state.age} years old!!!</p>
				<button onClick={(e) => {this.handleClick(e)}}>加一岁</button>
				<input type="text" onChange={(e) => {this.onValueChange(e)}}/>
			</div>
			);
	}
}

ReactDOM.render(
		<Component/>,
	document.getElementById('app'));



class Component extends React.Component{
	constructor(props){
		super(props);
		this.state={
			name:'jackie',
			age:18
		}
	}
	handleClick(){
		this.setState({
			age:this.state.age+1
		});
		console.log('家一岁');
	}
	onValueChange(e){
		this.setState({
			age:e.target.value
		});
		console.log('家一岁');
	}
	render(){
		return(
			<div>
				<h1>I am {this.state.name}</h1>
				<p>I am {this.state.age} years old!!!</p>
				<button onClick={(e) => {this.handleClick(e)}}>加一岁</button>
				<input type="text" onChange={(e) => {this.onValueChange(e)}}/>
			</div>
			);
	}
}

class Title extends React.Component{
	constructor(props){
		super(props);
	}
	render(props){
		return <h1>{this.props.children}</h1>
	}
}

class App extends React.Component{
	render() {
		return (
			<div className="">
		{/*容器*/}
				<Title>
					<span>App span</span>
					<a href="">link</a>
				</Title>
				<hr/>
			{/*单纯组件*/}
				<Component/>
			</div>
			);
	}
}

ReactDOM.render(
		<App/>,
	document.getElementById('app'));

//子组件改变父组件的值
class Child extends React.Component{
	constructor(props){
		super(props);
	}
	handleClick(){
		this.props.changeColor('red');
	}
	render(){
		return(
			<div>
				<h1>父组件的背景色： {this.props.bgColor}</h1>
				<button onClick={(e) => {this.handleClick(e)}}>改变父组件颜色</button>
			</div>
			);
	}
}

class Father extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			bgColor : '#999'
		}
	}

	onBgColorChange(color){
		this.setState({
			bgColor:color
		})
	}

	render(props){
		return(
			<div style={{background:this.state.bgColor}}>
			<Child bgColor={this.state.bgColor} changeColor={(color) => {this.onBgColorChange(color)}}/>	
			</div>
			
			)
	}
}

class App extends React.Component{
	render() {
		return (
			<div className="">
		{/*容器*/}
				<Title>
					<span>App span</span>
					<a href="">link</a>
				</Title>
				<hr/>
			{/*单纯组件*/}
				<Component/>
			</div>
			);
	}
}

ReactDOM.render(
		<Father/>,
	document.getElementById('app'));




//兄弟组件之间传值和状态提升
class Child1 extends React.Component{
	constructor(props){
		super(props);
	}
	handleClick(){
		this.props.changeChild2Color('red');
	}
	render(){
		return(
			<div>
				<h1>Child1的背景色： {this.props.bgColor}</h1>
				<button onClick={(e) => {this.handleClick(e)}}>改变Child1的背景色</button>
			</div>
			);
	}
}

class Child2 extends React.Component{
	constructor(props){
		super(props);
	}

	render(){
		return(
			<div style={{background:this.props.bgColor}}>
				<h1>Child2的背景色： {this.props.bgColor}</h1>
				<button onClick={(e) => {this.handleClick(e)}}>改变Child2的背景色</button>
			</div>
			);
	}
}

class Father extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			child2BgColor : '#999'
		}
	}

	onChild2BgColorChange(color){
		this.setState({
			child2BgColor:color
		})
	}

	render(props){
		return(
			<div>
			<Child1 changeChild2Color={(color) => {this.onChild2BgColorChange(color)}}/>	
			<Child2 bgColor={this.state.child2BgColor}/>	
			</div>
			
			)
	}
}


ReactDOM.render(
		<Father/>,
	document.getElementById('app'));